<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-04-10 
 -->


<template>
  <div>
  </div>
</template>

<script>
// 导入Threejs
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入GLTF加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
const clock = new THREE.Clock();
let missile = null;
let map_ukraine = null;
let map_russia = null;
let curvePath = null;
export default {
  name: 'windmail',
  data() {
    return {

    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      // 声明导弹模型/乌克兰地图/俄罗斯地图/曲线

      // 创建场景
      const scene = new THREE.Scene();
      // 创建相机
      const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      // 设置相机位置
      camera.position.set(10, 10, 5);
      camera.lookAt(0, 0, 0);
      scene.add(camera);
      // 设置渲染器大小
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 将渲染器添加到页面
      this.$el.appendChild(renderer.domElement);
      // 创建光源
      const light = new THREE.DirectionalLight(0xffffff, 1);
      // 设置光源位置
      light.position.set(0, 0, 1);
      scene.add(light);
      // 创建平型光源
      const spotLight = new THREE.SpotLight(0xffffff, 1);
      // 设置光源位置
      spotLight.position.set(0, 10, 5);
      scene.add(spotLight);
      // 在创建一个平型光
      const spotLight2 = new THREE.SpotLight(0xffffff, 1);
      // 设置光源位置
      spotLight2.position.set(0, -10, -5);
      scene.add(spotLight2);
      // 将光源添加到场景
      const controls = new OrbitControls(camera, renderer.domElement);
      this.camera = camera;
      this.scene = scene;
      this.controls = controls;
      this.renderer = renderer;

      renderer.setPixelRatio(window.devicePixelRatio, window.innerWidth, window.innerHeight);
      // 加载模型
      const loader = new GLTFLoader();
      loader.load('/static/model/ew8.glb', (gltf) => {
        const model = gltf.scene;
        missile = model.children[3];
        map_ukraine = model.children[1];
        map_russia = model.children[0];
        curvePath = model.children[2];
        scene.add(missile);
        scene.add(map_ukraine);
        scene.add(map_russia);
        // 根据点创建曲线
        const points = [];
        for (let i = curvePath.geometry.attributes.position.count - 1; i >= 0; i--) {
          const curve = new THREE.CatmullRomCurve3(curvePath.geometry.attributes.position.array);
          points.push(new THREE.Vector3(
            curvePath.geometry.attributes.position.array[i * 3],
            curvePath.geometry.attributes.position.array[i * 3 + 1],
            curvePath.geometry.attributes.position.array[i * 3 + 2]
          ))
        }
        curvePath = new THREE.CatmullRomCurve3(points);
      }, function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, function (error) {
        console.log('An error happened');
      });
      // 渲染
      renderer.render(scene, camera);
      this.render();

    },
    // 渲染动画帧
    render() {
      const { renderer, scene, camera, controls } = this;
      // 渲染
      renderer.render(scene, camera);
      // 动画帧
      requestAnimationFrame(this.render.bind(this));
      // 获取总共耗时 // 设置5s循环一次
      const totalTime = clock.getElapsedTime() % 5;
      let t = totalTime / 5;
      // 先判断导弹curvePath是否存在
      if (curvePath) {
        missile.position.copy(curvePath.getPointAt(t));
        // 判断t+=0.1是否小于1
        if (t + 0.1 < 1) {
          missile.lookAt(curvePath.getPoint(t))
        }
      }
      controls.enableDamping = true;
      controls.update();
    },
  }
  //  End
}

</script>

<style lang='css' scoped>
</style>
